<script setup lang="ts">
  // 本页没加刷新

  import { ref, onMounted } from 'vue'
  import { getHomeStatistics } from '@/api/home/index'
  import { userStore } from '@/stores'
  import { onLoad } from '@dcloudio/uni-app'
  const siteIdnum = ref('')
  const siteName = ref('')
  onLoad((options) => {
    siteIdnum.value = options.siteId ? options.siteId : ''
    siteName.value = options.siteId ? options.siteName : ''
  })
  const operate = ref([
    {
      name: '车辆油电量异常',
      num: 0,
      colorType: 3,
      navType: 'navigateTo',
      permission: 'svmapp:1:operation:caroilview',
      permissioncard: 'svmapp:1:operation:caroil',
      url: '/pages/operate/caroilmileage',
      value: 'carOilError',
    },
    {
      name: '车辆里程异常',
      num: 0,
      colorType: 3,
      navType: 'navigateTo',
      permission: 'svmapp:1:operation:mileageview',
      permissioncard: 'svmapp:1:operation:mileage',
      url: '/pages/operate/carmileage',
      value: 'carMileageError',
    },
    {
      name: '待处理违章',
      num: 0,
      colorType: 3,
      navType: 'navigateTo',
      permission: 'svmsapp:car-violation',
      permissioncard: 'svmapp:1:operation:violationNotDeal',
      url: '/pages/asset/car-violation/list',
      value: 'violationNotDeal',
    },
    {
      name: '即将保养',
      num: 0,
      colorType: 3,
      navType: 'navigateTo',
      permission: 'svmapp:1:operation:imaintenanceWaitview',
      permissioncard: 'svmapp:1:operation:maintenanceWait',
      url: '/pages/operate/upmaintenance',
      value: 'maintenanceWait',
    },
    {
      name: '即将年检',
      num: 0,
      colorType: 3,
      navType: 'navigateTo',
      permission: 'svmapp:1:operation:inspectionWaitview',
      permissioncard: 'svmapp:1:operation:inspectionWait',
      url: '/pages/operate/upyearannually',
      value: 'inspectionWait',
    },
    {
      name: '交强险即将到期',
      num: 0,
      colorType: 3,
      navType: 'navigateTo',
      permission: 'svmapp:1:operation:insureCompulsoryview',
      permissioncard: 'svmapp:1:operation:insureCompulsory',
      url: '/pages/operate/jqinsure',
      value: 'insureCompulsory',
    },
    {
      name: '商业险即将到期',
      num: 0,
      colorType: 3,
      navType: 'navigateTo',
      permission: 'svmapp:1:operation:insureBusinessview',
      permissioncard: 'svmapp:1:operation:insureBusiness',
      url: '/pages/operate/businessinsure',
      value: 'insureBusiness',
    },
    {
      name: 'GPS异常',
      num: 0,
      colorType: 3,
      navType: 'navigateTo',
      permission: 'svmapp:1:operation:abnormalview',
      permissioncard: 'svmapp:1:operation:abnormal',
      url: '/pages/operate/carabnormal',
      value: 'vehicleError',
    },
    {
      name: '车辆异动',
      num: 0,
      colorType: 3,
      navType: 'navigateTo',
      permission: 'svmapp:1:operation:movementview',
      permissioncard: 'svmapp:1:operation:movement',
      url: '/pages/operate/carabnormalmove',
      value: 'carAbnormalMovement',
    },
    {
      name: '车辆多天未动',
      num: 0,
      colorType: 3,
      navType: 'navigateTo',
      permission: 'svmapp:1:operation:movedaysview',
      permissioncard: 'svmapp:1:operation:movedays',
      url: '/pages/operate/cardaysnomove',
      value: 'carUnmove',
    },
    {
      name: '车辆待巡检',
      num: 0,
      colorType: 3,
      navType: 'navigateTo',
      permission: 'svmapp:1:operation:inspectedview',
      permissioncard: 'svmapp:1:operation:inspected',
      url: '/pages/operate/carinspected',
      value: 'carView',
    },
    {
      name: '驶出禁出围栏',
      num: 0,
      colorType: 3,
      navType: 'navigateTo',
      permission: 'svmapp:1:operation:electricFenceInview',
      permissioncard: 'svmapp:1:operation:electricFenceIn',
      url: '/pages/operate/outfence',
      value: 'electricFenceIn',
    },
    {
      name: '驶入禁入围栏',
      num: 0,
      colorType: 3,
      navType: 'navigateTo',
      permission: 'svmapp:1:operation:electricFenceOutview',
      permissioncard: 'svmapp:1:operation:electricFenceOut',
      url: '/pages/operate/comefence',
      value: 'electricFenceOut',
    },
    {
      name: '待维修车辆',
      num: 0,
      colorType: 3,
      navType: 'navigateTo',
      permission: 'svmsapp:car-repair',
      permissioncard: 'svmapp:1:operation:repairWait',
      url: '/pages/asset/car-repair/list',
      value: 'repairWait',
    },
    {
      name: '支出单审批待处理',
      num: 0,
      colorType: 3,
      navType: 'navigateTo',
      permission: 'svmsapp:operate-cost',
      permissioncard: 'svmapp:1:operation:costWaitProcessing',
      url: '/pages/operate-cost/list',
      value: 'costWaitProcessing',
      query: 'tag=1',
    },
    {
      name: '支出单等待付款',
      num: 0,
      colorType: 3,
      navType: 'navigateTo',
      permission: 'svmsapp:operate-cost',
      permissioncard: 'svmapp:1:operation:costWaitPay',
      url: '/pages/operate-cost/list',
      value: 'costWaitPay',
      query: 'tag=2',
    },
  ])
  const getTool = async () => {
    const res1: any = await getHomeStatistics({ siteId: siteIdnum.value })
    operate.value.forEach((item) => {
      item.num = res1.result.operate[item.value] || 0
    })
  }

  const nav = (item: any) => {
    if (userStore().v_auth(item.permission)) {
      if (item.value === 'violationNotDeal') {
        if (siteIdnum.value) {
          uni.navigateTo({ url: item.url + '?eventStatus=0&siteId=' + siteIdnum.value + '&siteName=' + siteName.value })
        } else {
          uni.navigateTo({ url: item.url + '?eventStatus=0' })
        }
      } else if (item.value === 'repairWait') {
        if (siteIdnum.value) {
          uni.navigateTo({ url: item.url + '?status=待维修' + '&siteId=' + siteIdnum.value + '&siteName=' + siteName.value })
        } else {
          uni.navigateTo({ url: item.url + '?status=待维修' })
        }
      } else {
        // 选择门店带入门店参数
        if (siteIdnum.value) {
          const selfQuery = item.query ? `&${item.query}` : ''
          uni.navigateTo({ url: item.url + '?siteId=' + siteIdnum.value + '&siteName=' + siteName.value + selfQuery })
        } else {
          const selfQuery = item.query ? `?${item.query}` : ''
          uni.navigateTo({ url: item.url + selfQuery })
        }
      }
    } else {
      uni.showToast({
        title: '暂无查看权限',
        icon: 'none',
      })
    }
  }
  onMounted(() => {
    getTool()
  })
</script>

<template>
  <view class="operate">
    <view class="operate-item">
      <template v-for="(item, index) in operate" :key="index">
        <view class="num" @click="nav(item)" v-if="userStore().v_auth(item.permissioncard)">
          <span class="fs40 fw700" style="color: #45b753">{{ item.num }}</span>
          <span class="fs24 mt12 c2">{{ item.name }}</span>
        </view>
      </template>
    </view>
  </view>
</template>

<style lang="scss">
  page {
    height: 100%;
    overflow: hidden;
    background: #f7f8fa;
  }
  .operate {
    width: 100%;
    padding: 24rpx;
  }
  .operate-item {
    width: 100%;
    padding: 32rpx 0;
    background: #ffffff;
    display: flex;
    flex-wrap: wrap;
  }
  .num {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: center;
    width: 25%;
    position: relative;
    margin-top: 64rpx;
    span:nth-child(1) {
      width: 100rpx;
      text-align: left;
    }
    span:nth-child(2) {
      width: 100rpx;
    }
  }
  .num:nth-child(1) {
    margin-top: 0;
  }
  .num:nth-child(2) {
    margin-top: 0;
  }
  .num:nth-child(3) {
    margin-top: 0;
  }
  .num:nth-child(4) {
    margin-top: 0;
  }
  .mt12 {
    margin-top: 12rpx;
  }
</style>
